<!--
 * @Author: your name
 * @Date: 2021-04-16 14:07:00
 * @LastEditTime: 2021-04-20 21:17:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /dvr-ui/src/components/main-upload.vue
-->
<template>
  <!-- 第二部分，上传视频界面-->
  <div>
    <el-col :span="12"
            :offset="6">
      <h1>视频上传界面</h1>
    </el-col>
    <el-col :span="12"
            :offset="6">
      <el-form ref="form"
               :model="form"
               label-width="80px"
               :rules="rules">
        <p></p>

        <el-form-item label="视频标题"
                      prop="title"
                      v-show="vUptag == 1">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="视频类型"
                      prop="tag"
                      v-show="vUptag == 1">
          <el-select v-model="form.tag"
                     placeholder="类型">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频简介"
                      prop="remarks"
                      v-show="vUptag == 1">
          <el-input v-model="form.remarks"
                    type="textarea"
                    placeholder="请输入内容"
                    maxlength="60"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item v-show="vUptag == 1">
          <el-button type="primary"
                     @click="creatForm('form')">立即创建</el-button>
          <el-button @click="resetForm('form')">重置所有信息</el-button>
        </el-form-item>
        <p v-show="vUptag == 2">当前要上传的视频id:{{vid}},名称:{{form.title}}</p>
        <el-form-item label="视频上传"
                      prop="video"
                      method="post"
                      v-show="vUptag == 2">
          <el-upload class="upload-video"
                     action="http://localhost:8000/video/upload"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :on-success="handleSuccess"
                     :on-error="handleError"
                     :before-upload="handleBeforeUpload"
                     :multiple="false"
                     :limit="3"
                     :on-exceed="handleExceed"
                     :file-list="form.video">
            <el-button size="medium"
                       type="primary">点击上传视频</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传视频文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频图片"
                      prop="image"
                      v-show="vUptag == 2">
          <el-upload class="upload-demo"
                     action="http://localhost:8000/video/uploadI"
                     :on-preview="handlePreviewI"
                     :on-remove="handleRemoveI"
                     :on-success="handleSuccessI"
                     :on-error="handleErrorI"
                     :before-upload="handleBeforeUploadI"
                     :multiple="false"
                     :limit="1"
                     :on-exceed="handleExceedI"
                     :file-list="form.image"
                     v-show="vUptag == 2">
            <el-button size="medium"
                       type="success"
                       v-show="vUptag == 2">点击上传封面</el-button>
            <div slot="tip"
                 class="el-upload__tip"
                 v-show="vUptag == 2">只能上传图片文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-show="vUptag == 2">
          <el-button type="primary"
                     @click="finishUpload()">上传完毕</el-button>
        </el-form-item>

        <el-form-item v-show="vUptag == 3">
          <h1>上传成功了！</h1>

          <el-button type="primary"
                     @click="lookMovie('form')">完成</el-button>

        </el-form-item>
      </el-form>

    </el-col>
  </div>
</template>

<script>
import { resetForm } from '../methods/base'
import axios from 'axios'
import { creatForm, handlePreview, handleRemove, handleSuccess, handleError, handleBeforeUpload, handleExceed } from '../methods/videoPlay'
import { handlePreviewI, handleRemoveI, handleSuccessI, handleErrorI, handleBeforeUploadI, handleExceedI } from '../methods/imgPlay'

export default {
  data () {
    return {
      flag: '0',//当flag为1，表示关键帧完全提取，这时才可以完成提交
      vid: '0',
      vUptag: 1,
      options: [
        {
          value: '1',
          lable: "原创"
        },
        {
          value: '2',
          lable: "转载"
        }
      ],
      form: {
        video: [],
        image: [],
        title: '',
        tag: '',
        remarks: '',
        // 文件上传
        id: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入视频名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
      },
    }
  },
  methods: {
    // video operation
    creatForm,
    resetForm,
    handlePreview,
    handleRemove,
    handleSuccess,
    handleError,
    handleBeforeUpload,
    handleExceed,
    // Image operation
    handlePreviewI,
    handleRemoveI,
    handleSuccessI,
    handleErrorI,
    handleBeforeUploadI,
    handleExceedI,
    /**
     * @description: 完成上传,同时让后端进行关键帧对比
     * @param {*}
     * @return {*}
     */
    finishUpload: function () {
      // 进行视频关键帧对比
      if (this.flag === '1') {
        let _this = this
        this.form.id = this.vid
        axios({
          headers: {
            'Content-type': 'charset=UTF-8'
          },
          method: 'post',
          url: 'http://localhost:8000/video/ImgCompara',
          data: this.form,
        }).catch(function () {
          _this.$notify.error({
            title: '错误',
            message: '创建数据库失败，可能是标题重复或者服务器问题'
          });
        })
        // 重置数据
        this.vUptag++
        this.form.title = ''
        this.form.tag = '1'
        this.form.video = []
        this.form.image = []
        this.form.id = '0'
        this.vid = 0
        this.form.remarks = ''
        this.flag = '0'
      } else {
        this.$notify.error({
          title: '错误',
          message: '请在上传视频完毕后再点击提交'
        });
      }
    },
    /**
     * @description: 
     * @param {*} formName
     * @return {*}
     */
    lookMovie: function (formName) {
      this.vUptag = 1
      console.log(formName)
    }
  }

}
</script>

<style>
</style>